<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>职责设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search_block">
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i class="el-icon-search"></i> 筛选查询
                        </template>
                        <el-row>
                            <el-col :span="2" class="pleft">
                                <span>输入搜索：</span>
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="search_input" placeholder="职责名称"></el-input>
                            </el-col>
                            <el-col :span="2" class="ml10">
                                <el-button type="primary" @click="queryList">查询结果</el-button>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="list_block">
                <div class="list_title clearfix">
                    <div class="list_l">
                        <i class="el-icon-tickets"></i>
                        <span>职责列表</span>
                    </div>
                    <div class="list_r">
                        <el-button @click="addDepart">添加</el-button>
                    </div>
                </div>
                <el-table
                    :data="dutyList"
                    border
                    v-loading="loading"
                    style="width:100%"
                >
                    <el-table-column
                        prop="title"
                        label="职责名称"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="description"
                        label="职责描述"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        label="成员数量"
                        sortable
                    >
                        <template slot-scope="scope">
                            <a @click="handleNum(scope)">{{scope.row.userNum}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="添加时间"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        label="是否启用"
                    >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.openFlag" @change="changeSwitch($event,scope)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <a @click="edit(scope)" class="mr20">编辑</a>
                            <a @click="deleteRow(scope)" class="mr20">删除</a>
                            <a @click="dispatch(scope)">立即调度</a>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page_container">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="threadNum"
                        layout="total, prev, pager, next, jumper"
                        :total="totleNum">
                    </el-pagination>                    
                </div>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>职责名称：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="title"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>职责描述：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="description"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>所属组织：</span></el-col>
                    <el-col :span="15">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group v-model="checkedOrgs" @change="handleCheckedChange">
                            <el-checkbox v-for="item in depName" :label="item" :key="item">{{item}}</el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>角色：</span></el-col>
                    <el-col :span="15">
                        <el-select v-model="roleId" placeholder="请选择角色" clearable>
                            <el-option
                                v-for="item in roleValue"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editDepartment()" :loading="btnloading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
           currentPage:1,
           loading: false,
           btnloading: false,
           activeNames: ['1'],
           search_input: "",
           showNum:"",
           showNumOptions: [{
               value: "5",
               label: '显示5条'
           },{
               value: "10",
               label: '显示10条'
           }],
           orderTypeOptions: [{
               value: "1",
               label: '正序'
           },{
               value: "-1",
               label: '倒序'
           }],
           orderType:"",
           dialogVisible: false,
           //添加职责字段
           orgs:[],
           title: "",
           description:"",
           orgCode:"",
           roleId: null,
           //存在本地的每页条数
           threadNum: parseInt(localStorage.getItem('pagesize')),
           //弹出框的标题
           dialogTitle:"",
           checkAll: false,
           checkedOrgs: [],
           isIndeterminate: true,
           rowId: null
        }
    },
    computed: mapState({
        msg: state => state.depart.msg,
        verifyCode: state => state.depart.verifyCode,
        depValue: state => state.depart.depList,
        roleValue: state => state.role.roleList,
        dutyInfo: state => state.depart.dutyInfo,
        depName(state) {
            let arr = []
            state.depart.depList.map((item) => {
                arr.push(item.orgName)
            });
            return arr;
        },
        depMatch(state) {
            let arr = [];
            state.depart.depList.map((item) => {
                let obj = {};
                obj[item.orgName] = item.rowId;
                arr.push(obj);
            })
            return arr;
        },
        dutyList(state) {
            let arr = [];
            state.depart.dutyList.map((item) => {
                item.createTime = item.createTime ? this.formatDate(item.createTime):'';
                item.userNum = item.userNum == null ? 0:item.userNum;
                arr.push(item);
            });
            return arr;
        },
        totleNum: state => state.depart.totleNum2
    }),
    methods: {
        handleCheckAllChange(val) {
            this.checkedOrgs = val ? this.depName : [];
            this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.depName.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.depName.length;
        },
        handleNum(scope) {
            this.$router.push({ name:'userset', params: {dutyId:scope.row.rowId}}) 
        },
        dispatch(scope) {
            this.$store.dispatch('dispatchDuty',{
                dutyId: scope.row.rowId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.$message(this.msg);
            })
        },
        handleCurrentChange(val) {
            this.$store.dispatch('getDutyList',{
                pageNo: val,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            })
        },
        formatDate(d) {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return new Date(parseInt(d)).toLocaleString({hour12:false});
            }else if(navigator.userAgent.indexOf('Edge') > -1) {
                return new Date(parseInt(d)).toLocaleString({hour12:false});
            }else{
                return new Date(parseInt(d)).toLocaleString('chinese',{hour12:false});
            }
        },
        edit(scope) {
            this.dialogVisible = true;
            this.dialogTitle = "编辑职责";
            this.checkedOrgs = [];
            this.$store.dispatch('getDutyById',{
                rowId: scope.row.rowId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.title = this.dutyInfo.title;
                this.description = this.dutyInfo.description;
                this.roleId = this.dutyInfo.roleId;
                this.rowId = this.dutyInfo.rowId;
                this.dutyInfo.orgs.map((item) => {
                    if(item.chooseFLag == true) {
                        this.checkedOrgs.push(item.orgName)
                    }
                })
            })
        },
        deleteRow(scope) {
            this.$confirm('确定删除？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(scope.row.userNum != 0) {
                    this.$message('该职责下有成员，不允许删除！');
                }else{
                    this.$store.dispatch('delDuty',{
                        sessionId: localStorage.getItem('sessionId'),
                        contentId: scope.row.rowId
                    }).then(() => {
                        if(this.msg == "删除成功") {
                            this.$message(this.msg);
                            this.getDutyList();
                        }else{
                            this.$message(this.msg);
                        }
                    })
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        addDepart() {
            this.title = "";
            this.description = "";
            this.checkedOrgs = [];
            this.rowId = null;
            this.roleId = "";
            this.dialogTitle = "添加职责";
            this.dialogVisible = true;
        },
        //编辑及新建职责
        editDepartment() {
            if(this.title == "") {
                this.$message('请输入职责名称');
            }else if(this.description == '') {
                this.$message('请输入职责描述');
            }else if(this.checkedOrgs.length == 0) {
                this.$message('请选择所属组织');
            }else if(!this.roleId) {
                this.$message('请选择角色');
            }else{
                let arr = [];
                this.checkedOrgs.map((item) => {
                    this.depMatch.map((itm) => {
                        if(itm[item]) {
                            arr.push(itm[item])
                        }
                    })
                })
                this.btnloading = true;
                this.$store.dispatch('createDuty',{
                    title: this.title,
                    description: this.description,
                    orgs: arr,
                    roleId: this.roleId,
                    rowId: this.rowId,
                    filter: true,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    if(this.msg == "保存成功") {
                        this.$message(this.msg);
                        this.btnloading = false;
                        this.dialogVisible = false;
                        this.getDutyList();
                    }else{
                        this.btnloading = false;
                        this.$message(this.msg);
                    }
                })
            }
        },
        //获取部门集合
        getDepList() {
            this.$store.dispatch('getDepAllList',{
                pageSize: -1,
                filter: true,
                sessionId: localStorage.getItem('sessionId')
            })
        },
        //获取角色集合
        getRolelist() {
            this.$store.dispatch('getAllRoleList',{
                filter: true,
                pageSize: -1,
                sessionId: localStorage.getItem('sessionId')
            })
        },
        //获取组织列表
        getDutyList(key) {
            this.$store.state.depart.dutyList = [];
            this.loading = true;
            this.$store.dispatch('getDutyList',{
                pageSize: this.threadNum,
                searchKey: key,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                if(this.msg !== '成功') {
                    this.loading = false;
                    this.$message(this.msg)
                }else{
                    this.loading = false;
                }
            })
        },
        //查询列表
        queryList() {
            this.getDutyList(this.search_input);
        },
        //开启及关闭
        changeSwitch(event,scope) {
            if(event == true) {
                this.$store.dispatch('openDuty',{
                    contentId: scope.row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.$message(this.msg);
                })
            }else{
                this.$store.dispatch('closeDuty',{
                    contentId: scope.row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.$message(this.msg);
                })
            }
        }
    },
    mounted() {
        this.getDutyList();
        this.getDepList();
        this.getRolelist();
    }
}
</script>
<style scoped>
.search_block >>> .el-collapse-item__header{
    padding: 0 15px;
    border: 1px solid #ebeef5;
    border-top: none;
    background-color:#eee;
}
.search_block >>> .el-collapse-item__content{
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-top: none;
    padding-top: 20px;
    padding-bottom: 20px;
}
.search_block >>> .el-checkbox{
    display: block;
}
.custom-1abc9c .el-checkbox{
    padding: 10px;
    margin: 0;
}
.pleft{
    margin-left:1px;
}
.list_block{
    margin-top: 10px;
}
.list_l{
    float: left;
}
.list_title{
    height: 48px;
    line-height: 48px;
    background-color: #eee;
    padding: 0 15px;
    font-size: 13px;
}
.list_r{
    float: right;
}
.el-table .cell {
    height: 23px;
}
.mr20{
    margin-right: 20px;
}
.el-table th>.cell{
    height: 22px;
}
.el-table .cell{
    height: 22px;
}
</style>


